<template>
  <div>
        <!-- 头部 -->
    <van-nav-bar title="房屋管理">
      <template #left>
        <van-icon name="arrow-left"  @click="$router.back()"/>
      </template>
    </van-nav-bar>
    <router-view />
    <!-- 没有房源时 发布跳转 -->
    <div class="empty-img" v-if="!user">
      <img src="http://liufusong.top:8080/img/not-found.png" alt="">
      <p>您还没有房源，
        <span class="qufabu" @click="$router.push('/rent/add')">去发布房源</span>吧
      </p>
    </div>

        <!-- 已经有房源列表 -->
    <van-swipe-cell v-else>
      <van-card
      v-for="item in rentList"
      :key="item.houseCode"
        :desc="item.desc"
        :title="item.title"
        class="goods-card"
        :thumb="'http://liufusong.top:8080'+item.houseImg"
      >
        <template #price>
          <span>{{item.price}}</span>
          <span class="price-yuan">元/月</span>
          </template>
        <template #tags>
          <van-tag  type="primary" size="medium">{{item.tags[0]}}</van-tag>
        </template>
          </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getRentList } from '@/api/user.js'
import { Toast } from 'vant'
export default {
  data () {
    return {
      isShow: true,
      rentList: []

    }
  },
  computed: {
    ...mapState(['user'])

  },

  created () {
    this.loadHouseList()
  },

  methods: {
    async loadHouseList () {
      try {
        const res = await getRentList()
        Toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        this.rentList = res.data.body
        // console.log(this.rentList)
      } catch (err) {
        Toast.fali('出错了')
      }
    }

  }
}
</script>

<style scoped lang='less'>
/deep/.van-nav-bar {
  background-color: #21b97a;
  .van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  .van-icon {
    color: #fff;
  }
}

.empty-img{
  font-size: 14px;
  display: flex;
  flex-direction: column;align-items: center;
  img{
    width: 150px;
    margin: 30px 0;
  }
  .qufabu{
    color: #33be85;
  }
}

/deep/.van-card{
  height: 120px;
  justify-content: space-around;
  padding-top: 18px;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 0;
  margin-top: 0;
  .van-image{
    float: left;
    width: 106px;
    height: 80px;

    .van-image__img{
      width: 106px;
      height: 80px;
     border-radius: unset;

    }
    .van-card__thumb {
      img{
        border-radius: unset;
      }
    }

  }
  .van-card__content{
    padding-left: 20px;
  }
  .van-tag{
    background-color: #E1F5F8;
    color:#39becd;
    font-size: 12px;

  }
  .van-card__title{
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
  }
  .van-card__desc{
    font-size: 12px;
    color: #afb2b3
  }
  .van-card__price{
    font-size: 16px;
    font-weight: bolder;
    color: red;
  }
  .price-yuan{
    font-weight: 400;
    font-size: 14px;
  }
}
</style>
